<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*       border值,自己测试一下
        值	    描述
        none	定义无边框。
        hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
       dotted	定义点状边框。在大多数浏览器中呈现为实线。
       dashed	定义虚线。在大多数浏览器中呈现为实线。
       solid	定义实线。
       double	定义双线。双线的宽度等于 border-width 的值,建议5px以上。
       groove	定义 3D 凹槽边框。其效果取决于 border-color 的值,建议10px以上。
        ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
        inset	定义 3D inset 边框。其效果取决于 border-color 的值。
       outset	定义 3D outset 边框。其效果取决于 border-color 的值。*/
        #d1{
            width: 100px;
            height:100px;
            border: 1px double red;
            /*设置圆角 值越大越圆*/
            border-radius: 3px;
        }
        #d2{
            width: 100px;
            height:100px;
            border:1px solid red;
            padding-left:30px;
            padding-top: 50px;
            /*添加一下样式后: 内边距不再影响宽高*/
            box-sizing: border-box;

        }
    </style>
</head>
<body>
<div id="d1">边框测试</div>
<div id="d2">内边距</div>
</body>
</html>